<template>
	<div class="main">
		<!-- 顶部工具部分 -->
		<div class="top">
			<div class="left">详情</div>
			<div class="right">
				<u-icon name="more-dot-fill" size="34" color=""></u-icon>
			</div>
		</div>
		<!-- 内容部分 -->
		<div class="content">
			<u-card :border="false">
				<template v-slot:head>
					<u-row class="v-head">
						<u-col span="2">
							<u-avatar :src="infos.avatar" mode="circle"></u-avatar>
						</u-col>
						<u-col span="6">
							<u-row>
								<u-col class="nickname">{{infos.nickname}}</u-col>
							</u-row>
							<u-row>
								<u-col class="infos">{{infos.age}}岁 {{infos.address}} {{infos.occupation}}</u-col>
							</u-row>
						</u-col>
						<u-col span="4">

						</u-col>
					</u-row>
				</template>
				<template v-slot:body>
					<div class="v-body">
						<div class="v-body-des">
							{{infos.description}}
						</div>
						<div class="v-body-imgs">
							<div class="item" v-for="itm,idx in infos.triendImgs" :key="itm.triend_img_id">
								<u-image width="600rpx" height="800rpx" :src="itm.img"></u-image>
							</div>
						</div>
					</div>
				</template>
				<template v-slot:foot>
					<div class="v-foot">
						<div class="v-foot-left">
							{{infos.create_time}}
						</div>
						<div class="v-foot-right">
							<u-icon name="thumb-up-fill" size="34" :color="starFillColor" :label="infos.triend_like_count"
								@click="changeStar()"></u-icon>
							<u-icon name="chat-fill" size="34" color="" :label="infos.triend_comment_count"></u-icon>
						</div>
					</div>
				</template>
			</u-card>
		</div>
		<!-- 评论部分 -->
		<div class="comments">
			<div class="top">
				评论{{comments.length}}
			</div>
			<div class="comment">
				<u-empty text="还没有评论哦" mode="list" v-show="comments.length == 0"></u-empty>
				<div class="item" v-for="item in comments" :key="item.id" v-show="comments.length>0">
					<div class="avatar">
						<u-avatar :src="item.avatar" size="80"></u-avatar>
					</div>
					<div class="text">
						<div class="one">{{item.nickname}}</div>
						<div class="two">{{item.text}}</div>
						<div class="three">{{item.time}} &emsp14;回复</div>
						<div class="child">
							<div class="item" v-for="itm in item.childComments" :key="itm.id">
								<div class="avatar">
									<u-avatar :src="itm.avatar" size="80"></u-avatar>
								</div>
								<div class="text">
									<div class="one">{{itm.nickname}}</div>
									<div class="two">{{itm.text}}</div>
									<div class="three">{{itm.time}} &emsp14;回复</div>
								</div>
								<div class="likes">
									<u-icon name="thumb-up-fill" size="34" :label="itm.likes"></u-icon>
								</div>

							</div>
						</div>
					</div>
					<div class="likes">
						<u-icon name="thumb-up-fill" size="34" :label="item.likes"></u-icon>
					</div>

				</div>
			</div>
		</div>
		<!-- 输入框部分 -->
		<div class="input-area" ref="input-area">
			<input type="text" v-model="inputValue" auto-blur />
			<button class="sendBtn">发送</button>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		onMounted,
		getCurrentInstance,
		ref,watch
	} from 'vue';
	import { getTriendDEtailById } from '../../api/triend.js'
	//拿到的信息
	const infos = ref({})
	onMounted(() => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();

		eventChannel.emit('acceptDataFromOpenedPage', {
			data: 'data from detail page'
		});

		eventChannel.emit('someEvent', {
			data: 'data from detail page for someEvent'
		});
		//获取传过来的id
		eventChannel.on('acceptDataFromOpenerPage',function(data) {
			infos.value = data
			
		})
	})
	watch(infos,(newValue, oldValue) => {
		getTDetail(newValue.triend_id)
	})
	//获取动态详情
	const getTDetail = async(id) => {
		const result = await getTriendDEtailById({
			triend_id:id
		})
		console.log('result',result)
	}
	//评论消息
	const comments = ref([
	])
	//点赞图表的颜色
	const starFillColor = ref('')
	//点击点赞，并且变色
	const changeStar = () => {
		switch (starFillColor.value) {
			case '':
				starFillColor.value = 'pink'
				break
			case 'pink':
				starFillColor.value = ''
				break
		}
	}
	//输入框的信息
	const inputValue = ref('')
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		position: relative;
		//顶部工具部分
		.top {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			margin-top: 20rpx;

			.left {
				font-size: 40rpx;
				color: #000;
			}

			.right button {
				width: 160rpx;
				height: 80rpx;
				background-color: hotpink;
				color: #fff;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 80rpx;
				margin-top: 10rpx;
			}
		}

		//内容部分
		.content {
			display: flex;
			flex-direction: column;

			//卡片头部部分
			.v-head {
				height: 100rpx;
				line-height: 50rpx;

				.btn1 {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					border-radius: 60rpx;
					color: hotpink;
					background-color: #efd2d4;
				}

				.nickname {
					font-size: 36rpx;
				}

				.infos {
					font-size: 24rpx;
					color: darkgray;
				}
			}

			//卡片身体部分
			.v-body {
				display: flex;
				flex-direction: column;

				.v-body-des {
					margin: 20rpx 0;
					padding: 0 20rpx;
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.v-body-imgs {
					text-align: center;
					display: flex;
					flex-direction: column;

					.item {
						width: calc(50% - 20rpx);
						height: 800rpx;
						margin: 10rpx 10rpx;
					}
				}
			}

			//卡片脚部部分
			.v-foot {
				display: flex;
				justify-content: space-between;

				.v-foot-right u-icon:first-child {
					margin-right: 20rpx;
				}
			}
		}

		//评论部分
		.comments {
			display: flex;
			flex-direction: column;
			.top {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 36rpx;
				letter-spacing: 10rpx;
			}
			.comment {
				display: flex;
				flex-direction: column;
				padding-bottom: 120rpx;
				.item {
					display: flex;
					padding: 20rpx;
					color: #c8c8c8;
					line-height: 120rpx;
					.avatar {
						margin-right: 20rpx;
					}

					.text {
						width: 70%;
						line-height: 40rpx;

						.one {
							letter-spacing: 10rpx;
							font-size: 28rpx;
						}

						.two {
							color: #000;
							font-size: 32rpx;
							margin: 10rpx 0;
						}

						.three {
							font-size: 24rpx;
						}
					}
					
				}

			}

		}
		//输入框部分
		.input-area{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 100rpx;
			display: flex;
			justify-content: space-evenly;
			background-color: #fff;
			
			line-height: 100rpx;
			input{
				width: 600rpx;
				height: 70rpx;
				margin: 15rpx 0;
				border: 1px solid #e7e7e7;
			}
			.sendBtn{
				height: 70rpx;
				line-height: 70rpx;
				font-size: 30rpx;
				margin: 15rpx 0;
			}
		}
	}
</style>